<!--
 * @Author: zhang00001 774004514@qq.com
 * @Date: 2024-06-17 10:18:04
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-08-02 17:49:32
 * @FilePath: \vue-admin\src\pages\active\ActivityForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      title="编辑"
      placement="right"
      :closable="true"
      :maskClosable="false"
      :keyboard="false"
      @close="showAddDialog = false"
      width="800"
      v-model:open="showAddDialog"
    >
      <a-form
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        ref="formRef"
        :rules="rules"
        :model="formData"
        label-position="top"
      >
        <a-form-item
          label="昵称"
          required
          name="user_name"
        >
          <a-input v-model:value="formData.user_name"></a-input>
        </a-form-item>
        <a-form-item
          label="头像"
          required
          name="avatar"
        >
          <ImageUpload
            ref="uploadRef"
            :limit="1"
            :fileSize="1"
            v-model:modelValue="formData.avatar"
          ></ImageUpload>
        </a-form-item>
        <a-form-item
          label="手机号"
          required
          name="phone"
        >
          <a-input v-model:value="formData.phone"></a-input>
        </a-form-item>
        <a-form-item
          label="邮箱"
          required
          name="email"
        >
          <a-input v-model:value="formData.email"></a-input>
        </a-form-item>

        <a-form-item
          label="所在地"
          required
          name="area"
        >
          <a-input v-model:value="formData.area"></a-input>
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="handleCancel">取消</a-button>
          <a-button
            style="margin-left: 20px"
            type="primary"
            :loading="loading"
            @click="handleSubmit"
          >
            确认
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script setup>
  import { userUpdate } from '@/api/index.js'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick } from 'vue'
  import Collect from 'collect.js'
  import { message } from 'ant-design-vue'
  const emits = defineEmits(['activity-added'])
  const props = defineProps({})
  const validateEmail = async (_rule, value) => {
    if (value) {
      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
        return Promise.reject('请输入正确的邮箱')
      } else {
      }
    } else {
      return Promise.resolve()
    }
  }

  const validatePhone = async (_rule, value) => {
    if (value === '') {
      return Promise.reject('请输入手机号')
    } else if (value) {
      if (!/^1[3456789]\d{9}$/.test(value)) {
        return Promise.reject('请输入正确的手机号')
      }
    } else {
      return Promise.resolve()
    }
  }
  const loading = ref(false)
  const formRef = ref()
  const rules = {
    user_name: [
      {
        required: true,
        message: '请输入昵称',
        trigger: 'change'
      }
    ],
    avatar: [
      {
        required: true,
        message: '请上传头像',
        trigger: 'change'
      }
    ],
    phone: [
      {
        required: false,
        validator: validatePhone,
        trigger: 'blur'
      }
    ],
    email: [
      {
        required: false,
        validator: validateEmail,
        trigger: 'blur'
      }
    ]
  }

  const showAddDialog = ref(false)
  const formData = ref({
    uid: 1
  })
  const dateRow = ref()
  const uploadVisible = ref(false)
  const handleSubmit = () => {
    formRef.value.validate().then(() => {
      const collection = Collect(formData.value)

      const diff = collection.diffAssoc(dateRow.value)
      if (JSON.stringify(diff.items) == '{}') {
        message.info('暂未做任何修改')
        return
      }
      loading.value = true
      userUpdate({ uid: formData.value.uid, ...diff.items })
        .then((res) => {
          if (res.errorCode) {
            message.error(res.msg || '操作失败')
            return
          }
          if (res.code == 200) {
            message.success('操作成功')
            emits('success')
            showAddDialog.value = false
          }
        })
        .catch((err) => {
          message.error(err.msg)
        })
        .finally(() => {
          loading.value = false
        })
    })
  }

  const handleCancel = () => {
    showAddDialog.value = false
  }

  const init = (row) => {
    showAddDialog.value = true
    nextTick(() => {
      formRef.value.resetFields()

      if (row) {
        let data = JSON.parse(JSON.stringify(row))
        dateRow.value = data

        formData.value = {
          avatar: data.avatar,
          user_name: data.user_name,
          phone: data.phone,
          email: data.email,
          area: data.area,
          uid: data.uid
        }
      }
    })
    //
  }
  defineExpose({
    init
  })
</script>

<style scoped></style>
